
import { Phone } from "@element-plus/icons-vue";
import { defineStore } from "pinia";
import { ref,watch } from "vue";

function initState() {
    return {
        isCollapse: false,
        tags: [
            // {
            //     path: 'user/home',
            //     name: 'home',
            //     label: '首页',
            //     icon: 'home'
            // },
        ],
        currentMenu: null,
        //这是登录时，不同权限获取的菜单列表
        //登录的后端接口需要返回token和不同权限的路由列表（此次工程中无component）
        menuList: '',
        token: "",
        //存了一堆removeeRoute方法（即router.addRouter()返回值），用来清除路由      
        routerList: [],
        username :'',
        role: 1,
        id: ''
    };
}

//store 里的东西是静态的
export const useAllDataStore = defineStore("allDate", () => {
    //ref state属性
    //computed getters
    //function actions

    //更清晰可维护性更高
    const state = ref(initState());
    // const state = ref({
    //     isCollapse: false,
    // });

    //路由持久化
    watch(state,(newObj)=>{
        if(!newObj.token) return;
        //将state存入localStorage，键名为store
        localStorage.setItem("store",JSON.stringify(newObj));
    },
    //深层监视
    {deep:true})

    //增加tag
    //面包屑，如果没有就添加进去
    function selectMenu(val) {
        if (val.name === 'adminHome' || val.name === 'userHome') {
            state.value.currentMenu = null
        } else {
            state.value.currentMenu = val
            // 如果tag不存在，则push进去
            const index = state.value.tags.findIndex(item => item.name === val.name)
            console.log(index)
            index === -1 ? state.value.tags.push(val) : "";
        }
    }

    function updateTags(tag) {
        let index = state.value.tags.findIndex(item => item.name === tag.name)
        state.value.tags.splice(index, 1)
        // console.log("函数中" + index)
    }

    function updateMenuList(val) {
        state.value.menuList = '';

        state.value.menuList = val;
    }

    //实现动态路由
    function addMenu(router,type) {
        //如果是刷新，则从localStore中获取数据
        if(type === "refresh")
        {
            if(JSON.parse(localStorage.getItem("store")))
            {
                state.value = JSON.parse(localStorage.getItem("store"));
                state.value.routerList = [];
            }else{
                return;
            }
        }
        // console.log("路由列表为"+useAllDataStore().state.tags);

        const menu = JSON.parse(state.value.menuList);

        const module = import.meta.glob('../views/**/*.vue');
        //把routerArr（路由数组）填充，
        const routeArr = [];

        menu.forEach((item) => {
            if (item.children !== undefined) {
            
                item.children.forEach((val) => {
                //这里不是小括号
                //一定保证字符串url路径完全正确，别有什么空格
                let url = `../views/${ val.url }.vue`;
                val.component = module[url];
                routeArr.push(...item.children);
            });

            } else {
                let url = `../views/${ item.url }.vue` ;
                // console.log("路由地址为"+url);
                item.component = module[url];
                // console.log("路由组件为");
                // console.log(module[url]);
                routeArr.push(item);
            }

            console.log(routeArr);
        });

        // console.log(router.options.routes)
        // console.log(routeArr)

        // 清除原有路由，解决多账号登录问题
        // 清除除了main和login之外的路由
        let routers = router.getRoutes();
        routers.forEach((item) => {
            if(item.name === "main"  || item.name === "login")return;
            else {
                router.removeRoute(item.name);
            }
        });



        routeArr.forEach((item) => {
            //push进去是方法
            state.value.routerList.push(router.addRoute("main",item));
        })



    }

    function clean(){
        //清除路由
        state.value.routerList.forEach((item) => {
            //没看懂为什么item会是一个函数
            if(item) item();
        })
        state.value = initState();
        localStorage.removeItem("store");
    }
    
    return {
        state,
        selectMenu,
        updateTags,
        updateMenuList,
        addMenu,
        clean
    };
});

